<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 等待加载效果 -->
    <link rel="stylesheet" href="../../loading/loading.css">
    <script src="../../loading/loading.js"></script>
    <!-- 图片缩放插件smartJQueryZoom -->
    <script type="text/javascript" src="../../view/Script/plugins/smartJQueryZoom/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../view/Script/plugins/smartJQueryZoom/e-smart-zoom-jquery.js"></script>
    <!-- PDF预览插件PDFObject -->
    <script type="text/javascript" src="../../PDFObject/pdfobject.js"></script>
    <style type="text/css">
        /* switcherContainer */
        #switcherContainer {
            position: absolute;
            right: 40px;
            top: 0px;
            border: none;
            z-index: 2;
        }

        .switcher {
            width: 50px;
            height: 10px;
            border: none;
            background-color: #5bc0de;
        }

        .switcher:hover {
            background-color: #039DAB;
        }

        #fake {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            border: none;
            z-index: -1;
        }

        /* fileContent */
        #fileContent {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
        }

        /* pdfContainer */
        #pdfContainer {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
            z-index: 1;
        }

        /* imgContainer */
        #imgContainer {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
        }

        /* ocrDiv */
        #ocrDiv {
            width: 100%;
            height: 100%;
            line-height: 200%;
            font-size: 24px;
            display: none;
            padding: 50px;
            box-sizing: border-box;
        }
    </style>
</head>

<body style="margin:0px; overflow:hidden">

<!-- 隐藏域用来存放id -->
<input type=hidden id="fileId" th:value="${id}">

<div id="switcherContainer">
    <!-- 切换 -->
    <div id="switcher" class="switcher"></div>
    <iframe id="fake" src="about:blank"></iframe>
</div>

<div id="previewDiv">
    <!-- 用来请求 以及显示TXT文本 -->
    <iframe id="fileContent"  th:src="@{'../../fileView/fileContent?id='+${id}}">
    </iframe>

    <!-- 用来显示PDF -->
    <iframe id="pdfContainer">
    </iframe>

    <!-- 用来显示图片 -->
    <div id="imgContainer">
    </div>


</div>

<!-- 用来显示OCR文字识别内容 -->
<div id="ocrDiv">
</div>

<script>
    var fileId = $("#fileId").val();
    /* showOcr用来判断预览时显示预览文件还是Ocr内容
      0正常显示预览 不显示切换按钮 1直接显示Ocr内容 不显示切换按钮 -1表示不由外部控制显示 由切换按钮进行切换
      调用预览接口没有传showOcr参数则赋值showOcr为-1 */
    var showOcr = 0;

    $(function () {

        refreshOcrContent();

        //绑定切换按钮点击事件
        $("#switcher").bind("click", function () {
            if ($("#ocrDiv").css("display") == "none") {
                refreshOcrContent();
                $("#previewDiv").hide();
                $("#ocrDiv").show();
            } else {
                $("#ocrDiv").hide();
                $("#previewDiv").show();
            }
        });

        window.onload = function () {
            var anything = $(document.getElementById("fileContent").contentWindow.document).find("body").children()[0];
            if (anything == undefined) {
                anything = $(document.getElementById("fileContent").contentWindow.document).find("body")[0];
            }
            //如果是图片流
            if (anything.tagName == "IMG") {
                $("#imgContainer").show();
                var img = $(anything).clone();
                $("#fileContent").hide();
                img.attr("id", "imageFullScreen");
                $("#imgContainer").append(img);
                $("#imageFullScreen").smartZoom();
                /*setTimeout(function(){
                    $(anything).attr("id","imageFullScreen");
                    $(anything).wrapAll("<div id="imgContainer" style="width:100%; height:100%"></div>");
                     $(anything).css({"width":"auto","height":"auto"});
                     debugger;
                     $(anything).smartZoom();
                },5000);*/
            }
            //如果是PDF路径
            else if (isJSON(anything.innerText) && JSON.parse(anything.innerText).data != undefined && JSON.parse(anything.innerText).data.fileType == "PDF") {
                var filePath = JSON.parse(anything.innerText).data.filePath;
                $("#pdfContainer").attr("src", filePath + "#navpanes=0&toolbar=0&statusbar=0&pagemode=none");
                $("#fileContent").hide();
                $("#pdfContainer").show();
            }
            //其他 如文本
            else {
                $("#fileContent").show();
            }
        }

        /* var iframe=document.getElementById("fileContent");
        iframe.onload = function(){
          debugger;
          var anything = $(document.getElementById("fileContent").contentWindow.document).find("body").children()[0];
            if (anything.tagName == "IMG"){
              $(anything).attr("id","imageFullScreen");
              $(anything).wrapAll("<div id="imgContainer" style="width:100%; height:100%"></div>");
               $(anything).css({"width":"100%","height":"auto"});

               $(anything).smartZoom({"containerClass":"zoomableContainer"});

            }
        };  */

    });

    //刷新OCR文字识别内容
    function refreshOcrContent() {
        $.ajax({
            url: "../../file/getFileInfoByDataSetIdList",//请求地址
            async: false,
            data: {
                "dataSetIds": '["' + fileId + '"]'
            }, //请求参数
            type: "POST",
            dataType: "json",
            success: function (data) {
                var doOCR = data.data[0].doOCR;
                //该文件在上传时有进行OCR文字识别
                if (doOCR == "yes") {
                    $("#ocrDiv").html(data.data[0].textContent);
                    //非-1由外部控制显示 0正常显示预览 不显示切换按钮 1直接显示Ocr内容 不显示切换按钮; -1由切换按钮控制显示
                    if (showOcr != "-1") {//非-1由外部控制显示
                        $("#switcher").hide();//既然由外部控制显示 则隐藏切换按钮
                        if (showOcr == "0") {//0正常显示预览
                            $("#ocrDiv").hide();
                            $("#previewDiv").show();
                        } else {//1直接显示Ocr内容
                            $("#previewDiv").hide();
                            $("#ocrDiv").show();
                        }
                    } else {//-1由切换按钮控制显示
                        $("#switcher").show();
                    }
                } else {
                    $("#switcher").hide();//上传时没有进行OCR文字识别 不显示切换按钮
                    $("#ocrDiv").hide();//上传时没有进行OCR文字识别 不显示OCR内容
                    $("#previewDiv").show();//上传时没有进行OCR文字识别 只显示预览内容
                }
            }
        })
    }

    function isJSON(str) {
        if (typeof str == "string") {
            try {
                var obj = JSON.parse(str);
                if (typeof obj == "object" && obj) {
                    return true;
                } else {
                    return false;
                }
            } catch (e) {
                return false;
            }
        }
    }

</script>
</body>
</html>